<template>
  <div class="app">
    <!-- vue3中v-model的原理是 :modelValue="state" @update:modelValue -->
    <Editor v-model="state"></Editor>
  </div>
</template>
<script>
  import { ref, provide } from 'vue'
  import data from './data.json'
  import Editor  from './packages/editor.jsx'
  import { registerConfig as config } from './utils/editor-config'
  export default {
    components: { Editor },
    setup(props) {
      const state = ref(data)
      provide('config', config)
      return {
        state
      }
    }
  }
</script>
<style lang="scss">
  .app {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
</style>